<template>
  <view>
    <nav-bar title="评估报告详情"></nav-bar>
    <view class="bg-box"
    :style="{ 
      background: `url(${baseImgUrl}/userImg/img_assess.png) no-repeat`,
      width:'750rpx',
      height:'318rpx',
      backgroundSize:'cover'
      }"
    ></view>
    <view class="title">{{ patientName || '--' }}的评估报告</view>
    <view class="detail-box">
      <scroll-view scroll-y :style="{ height: scrollHeight }">
        
        <!-- <view class="standards">
          <view class="common-title">康复计划达标</view>
          <view class="common-content">{{ reportDetail.result == 1 ? '是' : '否' }}</view>
        </view> -->
        <view class="img-box">
          <view class="common-title">体态图</view>
          <view class="img-list">
            <view class="img-item" v-for="(item, index) in reportDetail.imgList" :key="index">
              <image
                class="img"
                :src="item"
                mode="aspectFill"
                @click="previewImage(index)"
              />
            </view>
          </view>
        </view>
        <view class="initial">
          <view class="common-title">评估小结</view>
          <view class="common-content">{{ reportDetail.firstContent || '' }}</view>
        </view>
        <!-- <view class="address-box">
          <view class="common-title">训练地点</view>
          <view class="common-content">{{ reportDetail.exerciseAddress || '' }}</view>
        </view> -->
        <!-- <view class="guidance-box">
          <view class="common-title">指导跟踪</view>
          <view class="common-content">{{ reportDetail.guidance }}</view>
        </view> -->
        <view class="medium">
          <view class="common-title">康复目标</view>
          <view class="common-content">{{ reportDetail.secondContent || '' }}</view>
        </view>
        <view class="video-box">
          <view class="common-title">课程</view>
          <view class="common-content">
            <view style="margin: 0 -30rpx;">
              <you-tabs
                :activeName="tabActive"
                :tabsList="tabsList"
                @tabClick="clickTabItem"
              ></you-tabs>
            </view>
            <view
              class="common-no-data"
              v-if="!videoList || videoList.length === 0"
            >
              <image class="no-data-img" :src="baseIconUrl + '/commonIcon/icon_no_data.png'" />
              <view class="text">暂无课程~</view>
            </view>
            <view
              v-for="(item, index) in videoList" 
              :key="index"
            >
              <view class="content-box">
                <view class="left-box" @click.stop>
                  <video
                    :id="'videoId'+ index"
                    style="width: 100%; height: 100%"
                    class="video"
                    :src="item.videoUrl"
                  ></video>    
                </view>
                <view class="right-box">
                  <view class="name">{{ item.title }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="form_bottom_btn" v-if="reportDetail.status === 2">
      <view class="btn-box">
        <view class="confirm" @click="clickViewPlan">查看训练计划</view>
      </view>
    </view>
  </view>
</template>

<script>
  import api_user from '@/api/user'
  import { baseUrl, baseIconUrl, baseImgUrl } from '@/config'
  export default {
    name: 'MyReportDetail',
    data() {
      return {
        baseUrl,
        baseIconUrl,
        baseImgUrl,
        scrollHeight: '',
        reportId: '',
        patientName: null,
        reportDetail: {},
        tabActive: 1,
        tabsList: [
          { label: "灵活性拉伸", name: 1 },
          { label: "强化肌肉核心", name: 2 },
          { label: "ADL姿势改善", name: 3 },
          { label: "侧弯矫正训练", name: 4 },
        ],
        videoList: []
      }
    },
    onLoad(options) {
      this.reportId = options.reportId
      this.patientName = options.patientName
      this.getReportDetail()
    },
    methods: {
      clickTabItem(value) {
        this.tabActive = value
        this.videoList = this.allVideoList.filter(item => item.videoClass === this.tabActive)
      },
      getReportDetail() {
        const params = {
          id: this.reportId
        }
        api_user.reportDetail(params).then(res => {
          if (res.code !== 200) return
          const result = res.data
          this.reportDetail = {
            ...result,
            imgList: [
              result.faceImg && result.faceImg.includes('http') ? result.faceImg : this.baseUrl + result.faceImg,
              result.backImg && result.backImg.includes('http') ? result.backImg : this.baseUrl + result.backImg,
              result.sideImg && result.sideImg.includes('http') ? result.sideImg : this.baseUrl + result.sideImg
            ]
          }
          this.allVideoList = result.baPlan.videos || []
          this.videoList = this.allVideoList.filter(item => item.videoClass === this.tabActive)
          if (this.reportDetail.status === 2) {
            this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 85 - 64 + 'px'
          } else {
            this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 85 + 'px'
          }
        })
      },
      previewImage(index) {
        const url = this.reportDetail.imgList[index]
        uni.previewImage({
          current: url,
          urls: this.reportDetail.imgList,
          longPressActions: {
            itemList: ['保存图片'],
            success: function(data) {
              if (data.tapIndex === 0) {
                uni.saveImageToPhotosAlbum({
                  filePath: url,
                  success: (result) => {
                    uni.showToast({
                      title: '保存成功',
                      icon: 'none'
                    })
                  },
                  fail: (error) => {
                    uni.showToast({
                      title: '保存失败',
                      icon: 'none'
                    })
                  }
                })
              }
            }
          }
        })
      },
      clickViewPlan() {
        uni.redirectTo({ url: '/subPages/userMine/myPlan/myPlanList' })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .bg-box {
    position: fixed;
    // top: 0;
    left: 0;
    // width: 100%;
    // height: 318rpx;
    z-index: -1;
    // background-color: #A2BBE8;
  }
  .title {
    height: 60px;
    margin-left: 60rpx;
    line-height: 60px;
    font-size: 36rpx;
    font-weight: 500;
    color: #FFF;
  }
  .detail-box {
    margin: 0 30rpx;
    padding: 5px 0;
    border-radius: 32rpx;
    background-color: #FFF;
    .common-title {
      padding: 30rpx;
      font-size: 28rpx;
      color: #333;
    }
    .common-content {
      padding: 0 30rpx;
      line-height: 42rpx;
      font-size: 28rpx;
      color: #999;
    }
    .standards,
    .address-box,
    .guidance-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .img-box {
      .img-list {
        display: flex;
        flex-wrap: wrap;
        padding: 0 15rpx;
        .img-item {
          width: 150rpx;
          height: 150rpx;
          margin: 0 15rpx 20rpx;
          border-radius: 8rpx;
          .img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .content-box {
    display: flex;
    margin: 20rpx 0;
    border: 4rpx solid #FFF;
    border-radius: 16rpx;
    background-color: #FFF;
    .left-box {
      position: relative;
      width: 288rpx;
      height: 192rpx;
      margin-right: 20rpx;
      border-radius: 16rpx;
      overflow: hidden;
      video::-webkit-media-controls-play-button {
        display: none;
      }
    }
    .right-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 16rpx 0;
      .name {
        font-size: 32rpx;
        font-weight: 500;
      }
    }
  }
</style>
